<html>
  <head>
    <title>Timeline demo</title>

    <style>
		  body {font: 10pt arial;}
		</style>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="timeline.js"></script>
    
    <script type="text/javascript">
      google.load("visualization", "1");
      
      // Set callback to run when API is loaded
      google.setOnLoadCallback(initialize); 

      var vis;

      function initialize() {
        // Replace the data source URL on next line with your data source URL.
        var query = new google.visualization.Query('datasource.html');
        
        /*
        // Optional request to return only column C and the sum of column B, grouped by C members.
        query.setQuery('select C, sum(B) group by C');
        */
        
        // Send the query with a callback function.
        query.send(drawVisualization);
      }

      // Called when the Query result is returned
      function drawVisualization(response) {
        if (response.isError()) {
          return;
        }

        // retrieve the data table
        var data = response.getDataTable();

        // specify options
        options = {width:     600, 
                   height:    200, 
                   startDate: new Date("2010-08-16"),
                   endDate:   new Date("2010-09-07"),  
                   eventsInBox: false   // optional
                   };

        // Instantiate our table object.
        vis = new cvt.Timeline(document.getElementById('mytimeline'));

        // attach a callback function
        vis.setCallback(callback);

        // Draw our table with the data we created locally.
        vis.draw(data, options);
      }
      
      // adjust start and end time.
      function setTime() {
        if (!vis) return;
        
        var newStartDate = new Date(document.getElementById('startDate').value);
        var newEndDate   = new Date(document.getElementById('endDate').value);
        vis.setStartDate(newStartDate);
        vis.setEndDate(newEndDate);
        vis.redraw();        
      }
      
      function callback() {
        // adjust the values of startDate and endDate
        var startDate = vis.getStartDate();
        var endDate   = vis.getEndDate();
        document.getElementById('startDate').value = dateFormat(startDate);
        document.getElementById('endDate').value   = dateFormat(endDate);
      }
      
      // Format given date as "yyyy-mm-dd hh:ii:ss"
      // @param datetime   A Date object.
      function dateFormat(date) {
        datetime =   date.getFullYear() + "-" + 
                   ((date.getMonth()   <  9) ? "0" : "") + (date.getMonth() + 1) + "-" +
                   ((date.getDate()    < 10) ? "0" : "") +  date.getDate() + " " +
                   ((date.getHours()   < 10) ? "0" : "") +  date.getHours() + ":" + 
                   ((date.getMinutes() < 10) ? "0" : "") +  date.getMinutes() + ":" + 
                   ((date.getSeconds() < 10) ? "0" : "") +  date.getSeconds()
        return datetime;
      }
      
   </script>
  </head>
  <body>
    <p>This page demonstrates the timeline visualization.</p>
    <p>Click and drag to move the timeline, scroll to zoom the timeline.</p>
    <p>
      Starttime: <input type="text" id="startDate" value="2010-08-16">
      Endtime:   <input type="text" id="endDate" value="2010-09-07">
      <input type="button" id="setStartDate" value="set" onclick="setTime();">
    </p>

    <div id="mytimeline"></div>
    <br>
    
    <div id="info"></div>
  </body>
</html>
